/* 背景图 */
.mohu-wrap {
  overflow: hidden;
  .mohu {
    // position: relative;
    width: 100vw;
    height: 603px;
    background-size: cover;
    transform: scale(1.8);
    filter: blur(30px);
  }
}
/* 高亮(相似歌曲 精彩评论) */
.active {
  color: red;
  padding-bottom: 5px;
  font-size: 14px !important;
  // border-bottom: 2px solid red;
}
/* 内容区域 */
.details-wrap {
  width: 100vw;
  height: 100vh;
  padding: 0 10px;
  // background: -webkit-linear-gradient(90deg, pink, skyblue);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  /* 头部标题 */
  .details-top {
    height: 48px;
    border-bottom: 1px solid rgb(3, 212, 66);
    // background-color: rgb(15, 15, 15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    left: 0;
    right: 0;
    z-index: 9;
    .d-left {
      display: flex;
      align-items: center;
      image {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }
      .d-tit {
        font-size: 13px;
        color: #fff;
        margin-left: 10px;
        position: relative;
        z-index: 10000;
      }
    }
    .d-right {
      border: 1px solid #ccc;
      padding: 5px 10px;
      border-radius: 20px;
      margin-right: 5px;
      display: flex;
      align-items: center;
      .look {
        color: #fff;
        font-size: 14px;
      }
      image {
        margin-left: 8px;
        width: 6px;
        height: 10px;
      }
    }
    .songs-btn {
      position: absolute;
      top: 22px;
      left: 185px;
      image {
        width: 75px;
        height: 118px;
      }
    }
  }
  /* 中间播放环 */
  .player {
    position: relative;
    .p-disc {
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%);
      width: 247px;
      height: 247px;
      background: url("https://s3.music.126.net/mobile-new/img/disc.png?d3bdd1080a72129346aa0b4b4964b75f=")
        no-repeat;
      background-size: contain;
      image {
        position: absolute;
        top: 36px;
        left: 37px;
        // left: 50%;
        // transform: translate(-50%);
        width: 175px;
        height: 175px;
        border-radius: 50%;
      }
      //animation-play-state: paused;暂停动画
      .circle {
        animation: cirlce 8s linear infinite;
      }
      .paused {
        animation: cirlce 8s linear infinite;
        animation-play-state: paused;
      }
      @keyframes cirlce {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
      .bofang {
        width: 100%;
        position: absolute;
        top: 60px;
        left: 60px;
        // left: 50%;
        // transform: translate(-50%);
        image {
          width: 56px;
          height: 56px;
        }
      }
    }
  }
  /* 播放环下面的歌曲名字和作者 */
  .author {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    bottom: 250px;
    color: #fff;
    font-size: 18px;
  }
  /* 歌词高亮 */
  .lyric {
    height: 90px;
    overflow: hidden;
    margin-top: 310px;
    ::-webkit-scrollbar {
      display: none;
    }
    .act {
      background: linear-gradient(to top, #3db6f8, #06e4f8);
      -webkit-background-clip: text;
      color: transparent;
      // display: inline-block;
      font-size: 16px !important;
    }
    .item {
      text-align: center;
      min-height: 30px;
      line-height: 30px;
    }
  }

  /* 唱这首歌，一起唱歌 */
  .together {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 100px;
    right: 0;
    left: 0;
    .to-left {
      display: flex;
      align-items: center;
      image:nth-child(1) {
        width: 110px;
        height: 27px;
      }
      image:nth-child(2) {
        width: 15px;
        height: 15px;
        position: relative;
        left: -15px;
      }
    }
    .to-right {
      margin-left: 40px;
      display: flex;
      align-items: center;
      .to-icon {
        width: 20px;
        height: 20px;
        background-image: url("https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/10958309011/6b24/2279/c945/438870d95af399eedec241ec6de097b1.png");
        background-size: cover;
        animation: myAnimation 3.8s steps(1) infinite;
        position: relative;
        z-index: 100;
      }
      .songs-right {
        margin-left: 5px;
        color: #fff;
        font-size: 14px;
      }
    }
  }
  /* 打开和下载 */
  .bottom {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    .common {
      width: 170px;
      height: 42px;
      border: 1px solid red;
      color: #fff;
      line-height: 42px;
      text-align: center;
      border-radius: 24px;
    }
    .open {
      color: red;
    }
    .onload {
      background-color: red;
      border-radius: 24px;
    }
  }
  /* popup弹出层 */
  .tanchu {
    width: 100vw;
    height: 40px;
    background-color: #fff;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
  }
  .van-popup {
    .header {
      height: 58px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #999;
      padding: 0 50px;
    }
    .songs-tit {
      font-weight: 700;
    }
    /* 相似歌曲 */
    .songs-tit {
      padding-left: 10px;
    }
    .songs-info {
      margin-top: 15px;
      padding: 0 10px;
      .songs-info-wrap {
        margin-top: 10px;
        display: flex;
        align-items: center;
        .info-left {
          image {
            width: 47px;
            height: 47px;
            border-radius: 5px;
          }
        }
        .info-right {
          width: 95%;
          margin-left: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .info-right-wrap {
            height: 47px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .i-title {
              font-size: 15px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
            .i-nickname {
              color: #999;
            }
          }
          .icon {
            i {
              font-size: 24px;
              color: rgba(0, 0, 0, 0.5);
            }
          }
        }
      }
    }
    /* 精彩评论  */
    .comments {
      margin-top: 15px;
      padding: 0 10px;
      .comments-wrap {
        .comments-w {
          display: flex;
          align-items: center;
          .c-left {
            image {
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          }
          .c-right {
            margin-left: 10px;
            width: 95%;
            display: flex;
            justify-content: space-between;
            .c-right-wrap {
              .c-nickname {
                font-size: 14px;
                color: #666;
                line-height: 20px;
              }
              .c-date {
                font-size: 9px;
                color: #999;
              }
            }
            .c-icon {
              display: flex;
              align-items: center;
              .c-likedCount {
                margin-right: 5px;
                line-height: 22px;
                font-size: 11px;
                color: #999;
              }
              .c-like {
                font-size: 11px;
                color: #999;
              }
            }
          }
        }
        .c-text {
          color: #333;
          font-size: 15px;
          line-height: 22px;
          margin-top: 5px;
          margin-left: 40px;
          padding-bottom: 10px;
        }
      }
    }
  }
}

/* 小小人儿 */
@keyframes myAnimation {
  0% {
    background-position: 0 0;
  }
  1.25% {
    background-position: -60px 0;
  }
  2.5% {
    background-position: -120px 0;
  }
  3.75% {
    background-position: -180px 0;
  }
  5% {
    background-position: -240px 0;
  }
  6.25% {
    background-position: -300px 0;
  }
  7.5% {
    background-position: -360px 0;
  }
  8.75% {
    background-position: -420px 0;
  }
  10% {
    background-position: -480px 0;
  }
  11.25% {
    background-position: -540px 0;
  }
  12.5% {
    background-position: -600px 0;
  }
  13.75% {
    background-position: -660px 0;
  }
  15% {
    background-position: -720px 0;
  }
  16.25% {
    background-position: -780px 0;
  }
  17.5% {
    background-position: -840px 0;
  }
  18.75% {
    background-position: -900px 0;
  }
  20% {
    background-position: -960px 0;
  }
  21.25% {
    background-position: -1020px 0;
  }
  22.5% {
    background-position: -1080px 0;
  }
  23.75% {
    background-position: -1140px 0;
  }
  25% {
    background-position: -1200px 0;
  }
  26.25% {
    background-position: -1260px 0;
  }
  27.5% {
    background-position: -1320px 0;
  }
  28.75% {
    background-position: -1380px 0;
  }
  30% {
    background-position: -1440px 0;
  }
  31.25% {
    background-position: -1500px 0;
  }
  32.5% {
    background-position: -1560px 0;
  }
  33.75% {
    background-position: -1620px 0;
  }
  35% {
    background-position: -1680px 0;
  }
  36.25% {
    background-position: -1740px 0;
  }
  37.5% {
    background-position: -1800px 0;
  }
  38.75% {
    background-position: -1860px 0;
  }
  40% {
    background-position: -1920px 0;
  }
  41.25% {
    background-position: -1980px 0;
  }
  42.5% {
    background-position: -2040px 0;
  }
  43.75% {
    background-position: -2100px 0;
  }
  45% {
    background-position: -2160px 0;
  }
  46.25% {
    background-position: -2220px 0;
  }
  47.5% {
    background-position: -2280px 0;
  }
  48.75% {
    background-position: -2340px 0;
  }
  50% {
    background-position: -2400px 0;
  }
  51.25% {
    background-position: -2460px 0;
  }
  52.5% {
    background-position: -2520px 0;
  }
  53.75% {
    background-position: -2580px 0;
  }
  55% {
    background-position: -2640px 0;
  }
  56.25% {
    background-position: -2700px 0;
  }
  57.5% {
    background-position: -2760px 0;
  }
  58.75% {
    background-position: -2820px 0;
  }
  60% {
    background-position: -2880px 0;
  }
  61.25% {
    background-position: -2940px 0;
  }
  62.5% {
    background-position: -3000px 0;
  }
  63.75% {
    background-position: -3060px 0;
  }
  65% {
    background-position: -3120px 0;
  }
  66.25% {
    background-position: -3180px 0;
  }
  67.5% {
    background-position: -3240px 0;
  }
  68.75% {
    background-position: -3300px 0;
  }
  70% {
    background-position: -3360px 0;
  }
  71.25% {
    background-position: -3420px 0;
  }
  72.5% {
    background-position: -3480px 0;
  }
  73.75% {
    background-position: -3540px 0;
  }
  75% {
    background-position: -3600px 0;
  }
  76.25% {
    background-position: -3660px 0;
  }
  77.5% {
    background-position: -3720px 0;
  }
  78.75% {
    background-position: -3780px 0;
  }
  80% {
    background-position: -3840px 0;
  }
  81.25% {
    background-position: -3900px 0;
  }
  82.5% {
    background-position: -3960px 0;
  }
  83.75% {
    background-position: -4020px 0;
  }
  85% {
    background-position: -4080px 0;
  }
  86.25% {
    background-position: -4140px 0;
  }
  87.5% {
    background-position: -4200px 0;
  }
  88.75% {
    background-position: -4260px 0;
  }
  90% {
    background-position: -4320px 0;
  }
  91.25% {
    background-position: -4380px 0;
  }
  92.5% {
    background-position: -4440px 0;
  }
  93.75% {
    background-position: -4500px 0;
  }
  95% {
    background-position: -4560px 0;
  }
  96.25% {
    background-position: -4620px 0;
  }
  97.5% {
    background-position: -4680px 0;
  }
  98.75% {
    background-position: -4740px 0;
  }
  100% {
    background-position: -4800px 0;
  }
}
